<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html>
<head>
    <link rel="icon" href="img/logo.jpg">
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">
        * {
            font-family: 宋体;
        }

        .left_img {
            width: 25%;
            position: fixed;
        }

        .right_lsit {
            margin-left: 25%;
        }

        body {
            display: flex;
            background: #FFFFFF;
        }

        .xm_input {
            border-radius: 5px;
            display: inline-block;
            border: 1px solid #c7c7c7;
            background-color: #f9f9f9;
            padding: 17px 0px;
            /*margin: 10px auto;*/
            margin-left: 3px;
            margin-bottom: 12px;
        }

        .bt_mar {
            /*display: ;*/
            padding-bottom: 10px;
        }

        span {

        }

    </style>
</head>
<body>
<div class="left_img client bg_img"
     style="background-image: url(img/left.png); "></div>
<div style="width: 75%;" class="client right_lsit">
    <div class="sign_background_in">
        <div class="sign_background_no1 flex_01">
            <div class="flex_01">
                <div style="background-image: url(img/logo.jpg);width: 40px;height: 40px;border-radius: 15px"
                     class="bg_img"></div>
                <p style="font-family:华文楷体;padding-left: 8px;font-weight: bold;">小米账号</p>
            </div>
            <div>
                <span class="span_mar"><a href="">用户协议</a></span>
                <span class="span_mar"><a href="">隐私政策</a></span>
                <span class="span_mar" style="border-right: 1px solid black"><a href="">帮助中心</a></span>
                <span class="span_mar"><a href=""> 中文(简体) ▼</a></span>
            </div>
        </div>
        <div style="width: 50%;margin: 30px auto;box-shadow:-5px 5px 25px #e4e4e4,
             5px -5px 25px #e8e8e8;border-radius: 10px;">
            <%--            <div class="sign_background_no2" style="padding-top: 20px"><a href="login.jsp">登录</a></div>--%>
            <div class="sign_background_no2" style="padding-top: 20px">注册</div>
            <div style="width: 56px;height:5px;border-radius: 20px;background-color: #ff6700;margin: 0 auto"></div>
            <div class="sign_background_no3">

                <div class="sign_background_no5">
                    <span style="color: red;">${msg }</span>
                    <form action="user/register" method="post" enctype="multipart/form-data">

                        <table style="width: 500px;" border="0" cellspacing="0">
                            <tr class="bt_mar">
                                <td width="20%" class="_left">姓名：
                                    <div class="bt_mar"></div>
                                </td>
                                <td><input class="xm_input" id="uname" type="text" name="uname">
                                    <span id="unameInfo"></span></td>
                            </tr>
                            <tr class="bt_mar">
                                <td width="20%" class="_left">电话号码：
                                    <div class="bt_mar"></div>
                                </td>
                                <td><input class="xm_input" id="phone" type="text" name="phone"><span
                                        id="phoneInfo"></span></td>
                            </tr>
                            <tr>
                                <td width="20%" class="_left">所在地区：
                                    <div class="bt_mar"></div>
                                </td>
                                <td><input class="xm_input" id="area" type="text" name="area"><span
                                        id="areaInfo"></span></td>
                            </tr>
                            <tr>
                                <td width="20%" class="_left">账号：
                                    <div class="bt_mar"></div>
                                </td>
                                <td><input class="xm_input" id="username" type="text" name="username"><span
                                        id="usernameInfo"></span>
                                </td>
                            </tr>
                            <tr>
                                <td width="20%" class="_left">密码：
                                    <div class="bt_mar"></div>
                                </td>
                                <td><input class="xm_input" id="pwd" style="width: 220px; height: 30px;" type="password"
                                           name="password"><span id="pwdInfo"></span></td>
                            </tr>
                            <tr class="bt_mar">
                                <td width="20%" class="_left">性别：
                                    <div class="bt_mar"></div>
                                </td>
                                <td>
                                    <span style="margin-left: 5px;margin-bottom: 0"></span>
                                    男<input name="gender" type="radio" value="1">
                                    女<input name="gender" type="radio" value="0">
                                </td>
                            </tr>
                            <tr>
                                <td width="20%" class="_left">上传头像：
                                    <div class="bt_mar"></div>
                                </td>
                                <td><input style="margin-left: 3px;color:#ff6700 " type="file" name="photo_"></td>
                            </tr>
                        </table>
                        <%--                    <div class="sign_background_no6" id="btn" onclick="sub()">立即注册</div>--%>
                        <div style="clear: both;">
                            <div id="loginDiv" class="register_boby_no2_div" onclick="sub()"
                                 style="width: 340px;height:58px;border-radius: 5px;">
                                <span id="sub_btn"
                                      style="line-height: 58px;font-weight: bold;font-size: 16px;letter-spacing: 5px;color: white">注册</span>
                            </div>
                        </div>
                        <div style="font-size: 14px;float: right">&nbsp已有账号，现在<a style="color: #ff6700" href="login.jsp">登录</a>
                        </div>

                    </form>

                </div>
            </div>
        </div>
        <div class="sign_background_no7">注册帐号即表示您同意并愿意遵守小米 <span>用户协议</span>和<span>隐私政策</span></div>
        <div class="sign_background_no7" style="color: #e0e0e0;font-size: 12px"><a href="">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</a>
        </div>
    </div>
    <%--    <div class="sign_background_no8"><img src="img/sign01.jpg" alt=""></div>--%>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(".client").height(document.body.clientHeight);
    var st1, st2, st3, st4, st5;


    //姓名的非空校验
    $("#uname").blur(function () {
        //获取姓名
        var uname = $(this).val();
        if (uname == null || uname == "") {
            $("#unameInfo").text("姓名不能为空").css("color", "red");
            st1 = 0;
        } else {
            $("#unameInfo").text("姓名ok").css("color", "green");
            st1 = 1;
        }
    })
    //地区的非空校验
    $("#area").blur(function () {
        //获取地区
        var area = $(this).val();
        if (area == null || area == "") {
            $("#areaInfo").text("地区不能为空").css("color", "red");
            st2 = 0;
        } else {
            $("#areaInfo").text("地区ok").css("color", "green");
            st2 = 1;
        }
    })
    //密码的非空校验
    $("#pwd").blur(function () {
        //获取密码
        var pwd = $(this).val();
        if (pwd == null || pwd == "") {
            $("#pwdInfo").text("密码不能为空").css("color", "red");
            st3 = 0;
        } else {
            $("#pwdInfo").text("密码ok").css("color", "green");
            st3 = 1;
        }
    })

    //手机号码的校验
    $("#phone").blur(function () {
        //获取手机号
        var phone = $(this).val();
        //非空校验
        if (phone == null || phone == "") {
            $("#phoneInfo").text("手机号码不能为空").css("color", "red");
            st4 = 0;
            // $(this).focus();//输入错误聚焦输入框，重新输入
            return;
        }
        //正则校验
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            $("#phoneInfo").text("手机号码格式不正确").css("color", "red");
            // $(this).focus();//输入错误，重新输入
            st4 = 0;
        } else {
            //唯一校验
            $.ajax({
                url: "user/isRegister",
                type: "post",
                data: {"phone": phone, "func": "isRegister"},
                dataType: "json",
                success: function (isRegist) {
                    /*
                        isRegist 为true代表已经注册
                        isRegist 为false代表可以注册
                    */
                    if (isRegist) {
                        $("#phoneInfo ").text("手机号码已被注册").css("color", "red");
                        $("#phone").focus();//输入错误，重新输入
                        st4 = 0;
                    } else {
                        $("#phoneInfo").text("手机号码ok").css("color", "green");
                        st4 = 1;
                    }
                }
            })
        }
    })

    //用户名的校验
    $("#username").blur(function () {
        //获取用户名
        var username = $(this).val();
        //非空校验
        if (username == null || username == "") {
            $("#usernameInfo").text("用户名不能为空").css("color", "red");
            // $(this).focus();
            st5 = 0;
        } else {
            //唯一校验
            $.post(
                "user/isRegister",
                {"username": username, "func": "isRegister"},
                function (isRegist) {
                    /*
                        isRegist为true代表已被注册
                        isRegist为false代表可以注册
                    */
                    if (isRegist) {
                        $("#usernameInfo").text("用户名已被注册").css("color", "red");
                        // $("#username").focus();//输入错误重新输入
                        st5 = 0;
                    } else {
                        $("#usernameInfo").text("用户名正确").css("color", "green");
                        st5 = 1;
                    }
                },
                "json"
            )
        }
    })

    //注册方法
    function sub() {
        if (st1 == 1 && st2 == 1 && st3 == 1 && st4 == 1 && st5 == 1) {
            //提交表单!!!
            $("form").submit();
        } else {
            alert("请先正确填写信息！");
        }
    }

</script>
</html>